<template>
  <div id="talentList">
    <div class="bg_navs">
        <div class="title_nav">
            <div>80000+优质达人</div>
            <span>覆盖各个粉丝级KOL/KOC，规模化辐射</span>
        </div>
      <div class="list_nav" id="list_nav">
        <div class="list" id="list" :style="{'transform':'translate3d(-'+(active*180)+'px,0px,0px)','width':182*list.length+'px'}">
            <div class="item" v-for="(item,index) in list" :key="index">
                <img :src="item" class="avatar" alt="">
                <!-- <div class="info">
                    <img :src="item.platform" alt="">
                    <div>
                        <span>{{item.nick}}</span>
                        <span>粉丝 {{item.fans}}</span>
                    </div>
                </div> -->
            </div>
        </div>
      </div>
      <div class="more" @click="handleLogin">查看更多 &nbsp;&nbsp;></div>
    </div>
  </div>
</template>

<script>
import '@/assets/css/talentList.css'
export default {
  name: 'soluteTask',
  data () {
    return {
        active:0,
        list:[require('@/assets/01/talentList/1.png'),require('@/assets/01/talentList/2.png'),require('@/assets/01/talentList/3.png'),require('@/assets/01/talentList/4.png'),
              require('@/assets/01/talentList/5.png'),require('@/assets/01/talentList/6.png'),require('@/assets/01/talentList/7.png'),require('@/assets/01/talentList/8.png'),
              require('@/assets/01/talentList/9.png'),require('@/assets/01/talentList/10.png'),require('@/assets/01/talentList/11.png'),require('@/assets/01/talentList/12.png'),
              require('@/assets/01/talentList/13.png'),require('@/assets/01/talentList/14.png'),require('@/assets/01/talentList/15.png'),require('@/assets/01/talentList/16.png')],
        animate:false,
        height:document.body.clientHeight || document.documentElement.clientHeight
    }
  },
  methods:{
      pageResize(){
          this.height=document.body.clientHeight || document.documentElement.clientHeight
      },
      _isMobile() {
        let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
        return flag;
      },
      handleLogin(){
         if (this._isMobile()) {
            this.$Modal.confirm({
                title: '提示',
                content: '暂不支持移动端设备,请到PC端打开',
                okText: '确定',
                cancelText: '取消'
            })
        }else{
			let channel = sessionStorage.getItem('channel')
			if (channel) {
				window.open('https://cloud.redsay.net/login/1?channel=' + channel)
			} else {
				window.open('https://cloud.redsay.net/login/1?channel=103')
			}
			return
			
        }
        },
    handleScroll(){
        var that=this
        var num=this.active>15?this.active%15:this.active
        that.list.push(that.list[num])
        // that.list.shift()
        that.active=this.active+1
    }
  },
  created(){
      var that=this
    setInterval(that.handleScroll,3000)
  },
  mounted(){
    var that=this
    window.onresize = ()=>{
　　　　//调用methods中的事件
        that.pageResize();
    } 
  },
}
</script>
